<template>
	<view>
		<!-- <view :animation="anData" style="height:0;">
			测试：2022723
		</view> -->
		<scroll-view class="chat" scroll-y="true" scroll-with-animation="true"  :scroll-into-view="scrollToview">
<!-- 			<view class="first">
				<view class="first-kef">
					<image class="kef_tu" src="../../static/kefutu.png" mode="aspectFill"></image>
					<view class="first-">
						<view class="kef_zi">
							<text class="first-kef_zi">亲，请您核对订单信息</text>
							<view class="first-kef_tw">
								<view class="first-kef_tw_">
									<image class="first-kef_tw-tu" src="/static/sp.png" mode="aspectFill"></image>
									<text class="first-kef_tw-zi">魂之工坊 赛罗十周年雕像 123456</text>
								</view>
							</view>
							<view class="lianxi">

								<view class="lianxi-">
									<text class="lianxi-fs">联系方式 ：</text>
									<text class="lianxi-dh">1848486646</text>
								</view>

								<view class="lianxi-">
									<text class="lianxi-fs">配送地址 ：</text>
									<text class="lianxi-dh">美国加利福利亚州旧金山市唐人街道什么勾八校区唐人街大学这个校区校园收发室</text>
								</view>

							</view>
						</view>
					</view>
				</view>
			</view> -->

			<view class="chat-main" :style="{paddingBottom:inputh+'px'}">
				<view class="chat-ls" v-for="(item,index) in msgs" :key="index" :id="'msg'+item.tip">
					<view class="chat-time">{{item.time}}</view>
					<view class="msg-m msg-left" v-if="item.id !='b'">
						<image :src="item.imgurl" mode="aspectFill" class="user-img"></image>
						
						
						
						<view class="renyunle" v-if="item.types == 3">
							<image src="../../static/sp.png" mode="aspectFill" class="sailuo"></image>
							<view class="tuzi">
								<view class="zero-text">{{item.message}}</view>
								<view class="tuzi-text">{{item.text}}</view>
							</view>
							
						</view>
						
						
						
						
						<view class="messages" v-if="item.types == 0">
							<view class="msg-text">{{item.message}} </view>
						</view>
						<view class="messages" v-if="item.types == 1">
							<image :src="item.imgurl" mode="aspectFill" class="msg-img"></image>
						</view>
					</view>
					<view class="msg-m msg-right" v-if="item.id =='b'">
						<image :src="item.imgurl" mode="aspectFill" class="user-img"></image>
						
						
						
						
						<view class="renyunle" v-if="item.types == 3">
							<image src="../../static/sp.png" mode="aspectFill" class="sailuo"></image>
							<view class="tuzi">
								<view class="zero-text">{{item.message}}</view>
								<view class="tuzi-text">{{item.text}}</view>
							</view>
						</view>
						
						
						
						<view class="messages" v-if="item.types == 0">
							<view class="msg-text">{{item.message}} </view>
						</view>
						<view class="messages" v-if="item.types == 1">
							<image :src="item.imgurl" mode="aspectFill" class="msg-img"></image>
						</view>
					</view>
				</view>

				
			</view>


		</scroll-view>




		<submit @inputs="inputs" @heights="heights" @enterorder="enterorder"></submit>
	</view>
</template>

<script>
	// import add from '@/shagou.js';
	import submit from '../../components/submit/submit.vue'
	import datas from '../../commons/js/datas.js'
	// const nowTime = new Date().getTime()


	export default {
		onLoad:function(){
			this.getMsg();
		},
		//定义组件
		components: {
			submit,
		},
		data() {
			return {
				msgs:[],
				scrollToview: '',
				inputh:'60',
				
			}
		},
		

		methods: {
			
			//获取高度
			// getElementHeight:function(){
			// 	const query = uni.createSelectorQuery().in(this);
			// 	query.select('.submit').boundingClientRect(data =>{
			// 		this.$emit('heights',data.height);
			// 	}).exec();
			// },
			

			
			//发送订单，目前为止我能想到的了
			enterorder: function(e) {
				setTimeout(() => {
					let len = this.msgs.length;
					let data = {
							id:'a',
							imgurl:'../../static/kefutu.png',
							message: '这是你的订单',
							text:'请确认你的订单ultraman',
							types:3,
							time: new Date(),
							tip:len,
						
					};
					this.msgs.push(data);
								
					this.$nextTick(function(){
						
						this.scrollToview = 'msg'+this.len;
					})
					console.log(e)
				}, 3000);
				let len = this.msgs.length;
				let data = {
						id:'b',
						imgurl:'../../static/kefutu.png',
						message: '订单一号',
						text:'ultraman zero',
						types:3,
						time: new Date(),
						tip:len,
					
				};
				this.msgs.push(data);
			
				this.$nextTick(function(){
					
					this.scrollToview = 'msg'+this.len;
				})
				console.log(e)
			},
			getMsg:function(){
				let msg = datas.message();
				for(let i=0;i<msg.length;i++){
					msg[i].imgurl = '../../static/'+msg[i].imgurl;
					if(msg[i].types == 1){
						msg[i].message = '../../static/'+msg[i].message;
					}
					this.msgs.unshift(msg[i]);
				}
				this.$nextTick(function(){
					this.scrollToview = 'msg'+this.msgs[i-1].tip;
				})
				console.log(this.msgs)
			},
			inputs: function(e) {
				let len = this.msgs.length;
				let data = {
						id:'b',
						imgurl:'../../static/kefutu.png',
						message: e,
						types:0,
						time: new Date(),
						tip:len,
					
				};
				this.msgs.push(data);

				this.$nextTick(function(){
					
					this.scrollToview = 'msg'+this.len;
				})
				console.log(e)
			},
			
			heights: function(e) {
				this.inputh=e;
				this.goBottom();
				console.log('高度' + e);
				
			},
			//滚动到底部
			goBottom:function(){
				this.scrollToview='';
				this.$nextTick(function(){
					let len = this.msgs.length-1;
					this.scrollToview = 'msg'+this.msgs[len].tip;
				})
			}
			
		}

	}
</script>

<style lang="scss">
	// .second {
	// 	display: flex;
	// 	position: fixed;
	// 	bottom: 0;
	// }
	.renyunle{
		
		display: flex;
		width: 500rpx;
		height: 250rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin: 20rpx;
		.tuzi{
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			.tuzi-text{
				font-size: 20rpx;
			}
			.zero-text{
				font-size: 20rpx;
			}
		}
		
		.sailuo{
			width: 200rpx;
			height: 200rpx;
			padding: 20rpx;
			flex: none;
			border-radius: 10%;
			
		}
	}
	.msg-img{
		max-width: 400rpx;
		border-radius: 20rpx;
		margin-left: 16rpx;
	}
	.chat {
		height: 100%;

		.chat-main {
			padding-left: 20rpx;
			padding-top: 100rpx;
			padding-right: 20rpx;
			// padding-bottom: 120rpx;

			.chat-ls {
				display: flex;
				flex-direction: column;

				.chat-time {
					font-size: 25rpx;
					font-weight: 200;
					color: #2b2b2b;
					padding: 20rpx 0;
					text-align: center;
				}
				.msg-right{
					display: flex;
					flex-direction: row-reverse;
					.msg-text{
						background-color: #d5f1ff;
						border-radius: 20rpx 0 20rpx 20rpx;
						margin-right: 16rpx;
					}
					
				}
				
				.msg-left{
					display: flex;
					flex-direction: row;
					.msg-text{
						background-color: #fff;
						border-radius: 0 20rpx 20rpx 20rpx;
						margin-left: 16rpx;
					}
					
				}

				.msg-m {
					display: flex;
					padding: 20rpx 0;

					.user-img {
						width: 80rpx;
						height: 80rpx;
						flex:none;
						border-radius: 50rpx;
					}

					.messages {
						// font-size: $uni-font-size-lg;
						// color: $uni-text-color;
						// line-height: 44rpx;
						
						max-width: 480rpx;
						.msg-text{
							font-size: $uni-font-size-lg;
							color: $uni-text-color;
							line-height: 44rpx;
							padding: 18rpx 24rpx;
						}
					}
				}
			}


		}
	}





















	.first {
		margin-top: 80rpx;
		width: 100%;


		.first-kef {
			display: flex;
			align-items: flex-start;
			padding-left: 20rpx;

			.first- {
				margin-left: 20rpx;
				border-radius: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #fff;
				width: 500rpx;
				height: 500rpx;

				.kef_zi {
					width: 92%;
					height: 92%;
					display: flex;
					flex-direction: column;

					.lianxi {
						margin-top: 40rpx;
						display: flex;
						justify-content: space-around;
						flex-direction: column;
						height: 100%;
						width: 100%;

						.lianxi- {
							display: flex;

							.lianxi-dh {

								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 3;
								-webkit-box-orient: vertical;
								font-size: 23rpx;
							}

							.lianxi-fs {
								font-size: 25rpx;
								white-space: nowrap;
							}


						}

					}

					.first-kef_tw {
						background-color: #f8f8f8;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-top: 20rpx;

						.first-kef_tw_ {
							display: flex;
							width: 100%;
							height: 100%;

							.first-kef_tw-zi {
								white-space: nowrap;
								font-size: 30rpx;
								font-weight: 400;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 1;
								-webkit-box-orient: vertical;
								width: 100%;
								margin-left: 10rpx;
							}

							.first-kef_tw-tu {
								height: 120rpx;
								width: 120rpx;
								flex-shrink: 0;
							}
						}
					}

					.first-kef_zi {
						font-size: 30rpx;
						font-weight: 600;
					}
				}
			}

			.kef_tu {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				flex-shrink: 0;

			}
		}

	}







	page {
		height: 100%;

		background-color: #f8f8f8;

	}

	.flex-column-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
</style>
